<template>
  <el-popover
    v-model:visible="visible"
    show-arrow
    placement="bottom"
    :width="popWidth"
    trigger="manual"
    :style="{'margin-right': marginRight, 'margin-left': marginLeft}"
    @show="filterPopperShow"
  >
    <template #reference>
      <el-button
        type="text"
        size="mini"
        style="color: #666"
        @click="visible = !visible"
      >
        <span>{{ btnTitle }}</span>
        <i
          class="iconfont icon-xiajiantou"
          style="margin-left:3px;font-size: 8px;"
        />
      </el-button>
    </template>
    <div style="padding-top: 20px">
      <el-form
        v-if="bool"
        ref="forms"
        :model="formData"
        size="mini"
        label-width="100px"
      >
        <el-form-item
          v-for="(item,index) in formListData"
          :key="index"
          :label="item.label"
          :prop="item.key"
        >
          <el-input
            v-if="item.form_type==='text'"
            v-model="formData[item.key]"
            style="width: 100%;"
            size="mini"
            clearable
            :placeholder="`请输入${item.label}`"
          />
          <div
            v-if="item.form_type==='pricerange'"
            style="display:flex;justify-content:space-between;"
          >
            <el-input
              v-model="formData[item.key][0]"
              style="width:48%"
              placeholder="最小金额"
              oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
              @blur="()=>formData[item.key][0]?formData[item.key][0] = Number(formData[item.key][0]):null"
            /><span>-</span>
            <el-input
              v-model="formData[item.key][1]"
              placeholder="最大金额"
              style="width:48%"
              oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
              @blur="()=>formData[item.key][1]?formData[item.key][1] = Number(formData[item.key][1]):null"
            />
          </div>
          <el-select
            v-if="item.form_type==='select'&&item.is_search===false"
            v-model="formData[item.key]"
            clearable
            style="width: 100%;"
            :placeholder="`请选择${item.label}`"
          >
            <el-option
              v-for="(itm) in item.options"
              :key="itm"
              :label="itm.label||itm[item.setting.label]"
              :value="itm.value||itm[item.setting.value]"
            />
          </el-select>
          <el-select
            v-if="item.form_type==='select'&&item.is_search===true"
            v-model="formData[item.key]"
            style="width: 100%;"
            filterable
            remote
            reserve-keyword
            clearable
            :placeholder="`请选择${item.label}，可模糊搜索`"
            :remote-method="(query)=>{remoteMethod(query,index)}"
            :loading="loading"
          >
            <el-option
              v-for="itm in item.options"
              :key="itm.value"
              :label="itm[item.setting.label]"
              :value="itm[item.setting.value]"
            >
              <div>{{ itm[item.setting.label] }}</div>
            </el-option>
          </el-select>
          <date-picker
            v-if="item.form_type==='date'"
            v-model:date="formData[item.key]"
            clearable
            style="width: 100%;"
            :placeholder="`请选择${item.label}`"
          />
          <date-range-picker
            v-if="item.form_type==='daterange'"
            v-model:date="formData[item.key]"
            clearable
            style="width: 100%;"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
          <el-cascader
            v-if="item.form_type==='cascader'"
            ref="cascader"
            v-model="formData[item.key]"
            style="width: 100%;"
            :options="citys"
            placeholder="请选择地区"
            :collapse-tags="item.multiple"
            :props="{ multiple: item.multiple,checkStrictly: item.checkStrictly, expandTrigger: 'hover', label: 'regionName', value:'regionCode' }"
            clearable
          />
        </el-form-item>

        <el-form-item>
          <el-button
            size="mini"
            class="border-btn"
            @click="onCancel"
          >取消</el-button>
          <el-button
            size="mini"
            class="border-btn"
            @click="onReset"
          >重置</el-button>
          <el-button
            type="primary"
            size="mini"
            class="main-btn"
            @click="onSubmit"
          >确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-popover>
</template>

<script>
import { defineComponent, inject, onMounted, reactive, ref, toRefs } from 'vue'
import area from '@/utils/area.js'

export default defineComponent({
  props: {
    popoverWidth: {
      type: Number,
      default: 350,
    },
    left: {
      type: String,
      default: '0px',
    },
    right: {
      type: String,
      default: '0px',
    },
    btnTitle: {
      type: String,
      default: '更多搜索',
    },
    formList: {
      type: Array,
      default: () => {
        return [
          {
            key: 'status',
            label: '状态',
            form_type: 'select',
            value: 2,
            is_search: false,
            options: [
              { label: '草稿', value: 0 },
              { label: '审核中', value: 1 },
              { label: '审核通过', value: 2 },
              { label: '审核不通过', value: 3 },
            ],
          },
          {
            key: 'key_word',
            label: '模糊搜索',
            form_type: 'select',
            value: '',
            is_search: true,
            loading: false,
            setting: {
              api_file: '',
              api_name: '',
              key_word: '',
              label: '',
              value: '',
            },
            options: [],
          },
          {
            key: 'name',
            label: '关键字',
            form_type: 'text',
            value: '',
            is_search: false,
            options: [],
          },
          {
            key: 'priceRange',
            label: '金额范围',
            form_type: 'pricerange',
            value: [],
            is_search: false,
            options: [],
          },
          {
            key: 'date_range',
            label: '日期范围',
            form_type: 'daterange',
            value: [],
            is_search: false,
            options: [],
          },
          {
            key: 'date',
            label: '创建时间',
            form_type: 'date',
            value: [],
            is_search: false,
            options: [],
          },
          {
            key: 'area',
            label: '所在地区',
            form_type: 'cascader',
            value: [],
            is_search: false,
            multiple: false,
            checkStrictly: false,
            options: [],
          },
        ]
      },
    },
  },
  emits: ['onConfirm', 'onReset'],
  setup(props, context) {
    const api = inject('api')
    var forms = ref(null)
    var bool = ref(false) // 未解决动态form prop 初始不响应
    var visible = ref(false)
    var popWidth = props.popoverWidth
    var marginLeft = props.left
    var marginRight = props.right
    var reactiveData = reactive({
      formListData: props.formList,
    })
    const citys = area
    const defaultTime = ref([
      new Date(2000, 1, 1, 0, 0, 0),
      new Date(2000, 2, 1, 23, 59, 59),
    ])
    var loading = ref(false)

    var formData = reactive({})
    const formOperation = () => {
      for (let i = 0; i < reactiveData.formListData.length; i++) {
        formData[reactiveData.formListData[i].key] =
          reactiveData.formListData[i].value
      }
    }

    const remoteMethod = async(query, index) => {
      var itemObj = reactiveData.formListData[index]
      if (query !== '') {
        reactiveData.formListData[index].loading = true
        var pro = await api[itemObj.setting.api_file][itemObj.setting.api_name](
          {
            [itemObj.setting.key_word]: query,
          }
        )
        if (pro.code === 0) {
          reactiveData.formListData[index].options = pro.data.list
        } else {
          reactiveData.formListData[index].options = []
        }
        reactiveData.proLoading = false
      } else {
        reactiveData.formListData[index].options = []
      }
    }
    const filterPopperShow = () => {
      context.emit('show', visible.value)
    }
    const onReset = () => {
      context.emit('onReset')
      forms.value.resetFields()
    }
    const onSubmit = () => {
      console.log('确定', formData)
      context.emit('onConfirm', formData)
      visible.value = false
    }
    const onCancel = () => {
      visible.value = false
    }
    const close = () => {
      visible.value = false
    }
    onMounted(() => {
      formOperation()
      bool.value = true
      console.log(formData)
    })

    return {
      ...toRefs(props),
      ...toRefs(reactiveData),
      citys,
      bool,
      visible,
      loading,
      forms,
      popWidth,
      marginLeft,
      marginRight,
      formData,
      defaultTime,
      remoteMethod,

      onSubmit,
      onCancel,
      onReset,
      close,
      filterPopperShow,
    }
  },
})
</script>

